<template>
    <h1>用户管理</h1>
    <el-button @click="addUser">添加用户</el-button>
    <el-button @click="this.uploadDemoVisible = true">手动上传案例</el-button>
  <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="queryUser" class="demo-form-inline">
                <el-form-item label="用户名称">
                    <el-input v-model="queryUser.username" placeholder="字典名称"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                            style="width: 100px"
                            v-model="queryUser.userStatus"
                            placeholder="选择状态"
                    >
                        <el-option value="0" :selected="true" label="全部"/>
                        <el-option value="1" label="正常"/>
                        <el-option value="2" label="废弃"/>
                        <el-option value="99" label="删除"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadUser">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  <!-- 搜索栏部分结束 -->
  <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">

            <el-button @click="" type="primary">
                <el-icon>
                    <Plus/>
                </el-icon>
            </el-button>

            <el-button @click="" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
                <template #reference>
                    <el-button :disabled="deleteBtnDisabled" type="primary">
                        <el-icon>
                            <Minus/>
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>

            <el-button @click="exportUser" type="primary">
                <el-icon>
                    <Download/>
                </el-icon>
            </el-button>
            <el-upload
                style="display: inline-block; margin-left: 10px; margin-top: 5px"
                class="upload-demo"
                :action="importUserUrl"
                :limit="1"
                name="file"
                :on-exceed="importUserSuccess"
            >
                <el-button type="primary">
                    <el-icon>
                        <Upload/>
                    </el-icon>
                </el-button>
            </el-upload>
        </el-col>
    </el-row>
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="userTable" @selection-change="handleSelectionChange" :data="users" border :stripe="true"
                      style="width: 95%">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="userId" label="#"/>
                <el-table-column prop="userHead" label="头像">
                    <template #default="scope">
                        <img width="50" :src="scope.row.userHead" v-if="scope.row.userHead">
                        <el-tag type="danger" v-else>无</el-tag>
                    </template>
                </el-table-column>
              <el-table-column prop="dept.deptName" label="部门"/>
                <el-table-column prop="username" label="登录名"/>
                <el-table-column prop="nickname" label="昵称"/>
                <el-table-column prop="userTel" label="电话"/>
                <el-table-column prop="userEmail" label="邮箱"/>
                <el-table-column prop="userGender" label="性别">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.userGender == 1">男</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.userGender == 2">女</el-tag>
                        <el-tag type="danger" v-else>未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="dictNotes" label="备注"/>
                <el-table-column prop="dictStatus" label="状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.userStatus == 1">正常</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.userStatus == 2">废弃</el-tag>
                        <el-tag type="danger" v-else>删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="180" prop="createTime" label="创建时间"/>
                <!-- 行工具栏 -->
                <el-table-column width="140" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toEditUser(scope.row.dictId)" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteUser(scope.row.dictId)" title="您确定要删除这个字典信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->
  <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                           :total="total"/>
        </el-col>
    </el-row>
  <!-- 分页部分结束 -->


    <UserAddWin :visible="addUserWinDilogVisible" @optionCompleted="this.addUserWinDilogVisible = false"></UserAddWin>
    <UploadDemo :visible="uploadDemoVisible" @optionCompleted="this.uploadDemoVisible = false"></UploadDemo>
</template>
<script>
import UserAddWin from './user-add-win.vue';
import UploadDemo from './upload-demo.vue';
import UserRequest from '../../../api/user.js';

// 导入config
import config from '../../../util/config.js';

export default {
    components: {
        UserAddWin,
        UploadDemo
    },
    data() {
        return {
            addUserWinDilogVisible: false,
            queryUser: {},// 查询条件
            users: [],// 用户列表
            total: 0,// 总记录数
            currentPage: 1,// 当前页码
            limit: 10,// 每页记录数
            uploadDemoVisible: false,// 上传窗口
            importUserUrl: config.sysUrl + "/sys/user/import",// 导入用户URL
        }
    }, methods: {
        /**
         *  导入用户成功的处理事件
         * @param res 响应的结果
         * @param file
         * @param files
         */
        importUserSuccess(res,file,files){
            this.$message({
                type: 'success',
                message: res.msg
            });
            // 重新加载数据
            this.loadUser();
        },
        /**
         * 数据导出的按钮事件
         */
        exportUser() {
            // 超链接下载导出文件
            // 拼接请求参数
            let url = config.sysUrl + "/sys/user/export?a=1";
            for (let paramName in this.queryUser) {
                if (this.queryUser[paramName]) {
                    url += "&" + paramName + "=" + this.queryUser[paramName];
                }
            }
            url += "&page=" + this.currentPage + "&limit=" + this.limit;
            //超链接请求
            location.href = url;
        },
        addUser() {
            this.addUserWinDilogVisible = true;
        },
        loadUser() {
            this.queryUser.page = this.currentPage;
            this.queryUser.limit = this.limit;
            UserRequest.loadUser(this.queryUser, res => {
                console.log(res)
                this.users = res.data.data;
                this.total = res.data.total;
            })
        },
        pageChange(page, limit) {
            this.currentPage = page;
            this.loadUser();
        }
    }, mounted() {
        this.loadUser()
    }
}
</script>